<template>
  <div>
    <!-- <div class="bg-white grid-content">
      <el-form :inline="true" :model="SyjForm" class="demo-form-inline">
        <el-form-item label="日期:">
          <el-date-picker
            v-model="searchDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="formSearch()">查询</el-button>
          <el-button type="success" @click="download()">下载</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="bg-white grid-content">
      <div style="overflow: hidden">
        <div class="mytitle">水井班报表</div>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData">
        <el-table-column align="center" prop="id" label="井ID">
        </el-table-column>
        <el-table-column align="center" prop="rq" label="日期">
        </el-table-column>
        <el-table-column align="center" prop="jgmc" label="机构名称">
        </el-table-column>
        <el-table-column align="center" prop="gqmc" label="工区名称">
        </el-table-column>
        <el-table-column align="center" prop="zkmc" label="站库名称">
        </el-table-column>
        <el-table-column align="center" prop="bc" label="班次">
        </el-table-column>
        <el-table-column align="center" prop="zssj" label="注水时间">
        </el-table-column>
        <el-table-column align="center" prop="jcsj" label="检查时间">
        </el-table-column>
        <el-table-column align="center" prop="way" label="注水方式">
        </el-table-column>
        <el-table-column align="center" label="注水压力">
          <el-table-column align="center" label="泵压">
            <el-table-column align="center" prop="pumpOpen" label="开井">
            </el-table-column>
            <el-table-column align="center" prop="pumpClose" label="关井">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="套压">
            <el-table-column align="center" prop="topen" label="开井">
            </el-table-column>
            <el-table-column align="center" prop="tclose" label="关井">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" prop="yy" label="油压">
            <el-table-column align="center" prop="oilOpen" label="开井">
            </el-table-column>
            <el-table-column align="center" prop="oilClose" label="关井">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="水表读数">
          <el-table-column align="center" prop="watermeterBegin" label="始">
          </el-table-column>
          <el-table-column align="center" prop="watermeterOver" label="终">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="rzrl" label="日注入量">
        </el-table-column>
        <el-table-column align="center" prop="rpzl" label="日配注量">
        </el-table-column>
        <el-table-column align="center" prop="bz" label="备注">
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        align="right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[5, 10, 20, 30, 40, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

  <script>
import sjbbbApi from "@/api/sjbbb";

export default {
  data() {
    return {
      pageNo: 1, //当前页码
      pageSize: 10, //每页显示数量
      total: 0, //总数量
      currentPage: 1, //当前页码
      //时间快捷选择
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      searchDate: "",
      //  表头数据
      tableHead: [
        { val: "指标11111", item: "target1" },
        { val: "指标2", item: "target2" },
        { val: "指标3", item: "target3" },
        { val: "指标4", item: "target4" },
        { val: "指标5", item: "target5" },
      ],
      // 表格数据
      tableData: [],
      //excel数据
      excelData: [],
      approveStatus: "",
      SyjForm: {},
      // // table数据总条数
      // tableTotal: 30,
      // // 分页数
      // currentSize: 10,
      // //当前页
      // currentPage: 4
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    /**
     * 查询列表
     */
    async search() {
      // this.pageNo = pageNo; //当前页码
      // this.pageSize = pageSize; //每页显示数量
      //发送查询请求
      let res = await sjbbbApi.getSjbbbList(
        this.pageNo,
        this.pageSize,
        this.searchDate[0],
        this.searchDate[1]
      );
      //判断是否成功
      if (res.success) {
        console.log(res.data);
        //赋值
        this.tableData = res.data.records;
        //总数量
        this.total = res.data.total;
      }
    },
    //条件查询
    formSearch() {
      // console.log(this.searchDate);
      this.search();
    },
    //报表导出下载
    download() {
      require.ensure([], async () => {
        const { export_json_to_excel } = require("@/vendor/Export2Excel"); //此处把路径要写对
        //复杂表头书写
        //添加表格id
        var myindex = [];
        for (var i = 0; i < this.total; i++) {
          myindex[i] = i + 1;
        }
        var newindex = myindex.map((item) => {
          console.log(item);
          return {
            index: item,
          };
        });

        let res = await sjbbbApi.getSjbbbList(
          1,
          this.total,
          "",
          this.searchDate[0],
          this.searchDate[1]
        );
        if (res.success) {
          this.excelData = res.data.records;
        }
        console.log("myindex", myindex);
        console.log("newindex", newindex);
        // //将添加的序号加入到表格中形成新的mergeArr表格
        let mergeArr = [newindex, this.excelData].reduce((prev, curr) => {
          return prev.map((item, index) => {
            return Object.assign(item, curr[index]);
          });
        });
        // var result = Object.assign(newindex,this.tableData)
        console.log("mergeArr", mergeArr);
        console.log("tableData", this.excelData);

        // const tHeader = ['日期', '姓名', '地址'];
        // // 上面设置Excel的表格第一行的标题
        //一级表头
        const multiHeader = [
          [
            "序号",
            "标准间",
            "井号",
            "班次",
            "注水时间",
            "检查时间",
            "注水方式",
            "注水压力",
            "",
            "",
            "",
            "",
            "",
            "水表读数",
            "",
            "日注入量",
            "日配注量",
            "备注",
          ],
          [
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "泵压",
            "",
            "套压",
            "",
            "油压",
            "",
            "始",
            "终",
            "",
            "",
            "",
          ],
        ];
        //二级表头
        const header = [
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "开井",
          "关井",
          "开井",
          "关井",
          "开井",
          "关井",
          "",
          "",
          "",
          "",
          "",
        ];
        //表头字段
        const filterVal = [
          "id",
          "bzj",
          "jh",
          "bc",
          "zssj",
          "jcsj",
          "zsfs",
          "pumpOpen",
          "pumpClose",
          "topen",
          "tclose",
          "oilOpen",
          "oilClose",
          "watermeterBegin",
          "watermeterOver",
          "rzrl",
          "rpzl",
          "bz",
        ];
        //需要合并的单元格
        const merges = [
          "A1:A3",
          "B1:B3",
          "C1:C3",
          "D1:D3",
          "E1:E3",
          "F1:F3",
          "G1:G3",
          "H1:M1",
          "H2:I2",
          "J2:K2",
          "L2:M2",
          "N1:O1",
          "P1:P3",
          "Q1:Q3",
          "R1:R3",
          "N2:N3",
          "O2:O3",
        ];
        //表头样式
        let headerStyle = [
          "A1",
          "B1",
          "C1",
          "D1",
          "E1",
          "F1",
          "G1",
          "H1",
          "I1",
          "J1",
          "K1",
          "L1",
          "M1",
          "N1",
          "O1",
          "P1",
          "Q1",
          "R1",
        ];
        // 上面的index、nickName、name是tableData里对象的属性
        console.log(this.excelData);
        // const list = this.tableData;  //把data里的tableData存到list
        // const data = this.formatJson(filterVal, list);
        const list = mergeArr;
        const data = this.formatJson(filterVal, list);
        console.log(111111);
        console.log(list);
        console.log(data);

        export_json_to_excel({
          //header: tHeader,
          multiHeader: multiHeader,
          header: header,
          merges: merges,
          headerStyle: headerStyle,
          data: data,
          filename: "水源井统计报表",
          autoWidth: true,
          bookType: "xlsx",
        }); //"列表excel"  是下载后的表名 可修改
        this.$message.success("导出报表成功！");
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => {
        return filterVal.map((j) => v[j]);
      });
    },

    /*** 当每页数量发生变化时触发该事件 */
    handleSizeChange(size) {
      console.log(size);
      this.pageSize = size;
      //将每页显示的数量交给成员变量
      this.search(this.pageNo, size);
    },
    /*** 当页码发生变化时触发该事件 */
    handleCurrentChange(page) {
      console.log(page);
      this.pageNo = page;
      //调用查询方法
      this.search(page, this.pageSize);
    },
    // 序号计算
    indexMethod(index) {
      // index默认在0开始，这里+1
      return index + 1 + (this.pageNo - 1) * this.pageSize;
    },
  },
};
</script>


  <style lang="scss" scoped>
// 标题
.mytitle {
  font-size: larger;
  padding-left: 45%;
  margin-bottom: 16px;
  float: left;
}

//按钮组
.myTime {
  float: right;
}

//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
  display: none;
}

.calendar ::v-deep .el-button-group::after {
  display: none;
}

// 分割线样式
.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
  margin: 15px 10px 15px 10px;
}
</style>
